<script lang="tsx">
import useRender from "@/utils/hooks/render";
import { ref } from "vue";
// import { DatePicker } from "@nutui/nutui-taro/dist/packages/datepicker/index.mjs";
import MyDatePicker from "./date-picker/index.vue";
// import "@nutui/nutui-taro/dist/packages/datepicker/style.mjs";
import { ArrowRight } from "@nutui/icons-vue-taro";

export default {
  name: "time-field",
  props: {
    type: {
      type: String as () =>
        | "date" //
        | "time" //
        | "datetime" //
        | "year-month"
        | "month-day"
        | "datehour"
        | "hour-minute",
      default: "year-month",
    },
  },
  setup(props, ctx) {
    const timeText = ref("");
    const open = ref(false);

    const onCancel = () => {
      open.value = false;
      ctx.emit("cancel");
    };

    const onConfirm = ({ selectedValue, selectedOptions }) => {
      console.log("time-field onConfirm", selectedValue);

      // date(年月日) time(时分秒) year-month(年月) month-day(月日) datehour(年月日时) hour-minute(时分v4.0.5)
      const typeMap = {
        date: selectedValue.join("-"),
        time: selectedValue.join(":"),
        datetime: (([Y, M, D, H, m]) => `${[Y, M, D].join("-")} ${H}:${m}`)(
          selectedValue
        ),
        "year-month": selectedValue.join("-"),
        "month-day": selectedValue.join("-"),
        datehour: (([Y, M, D, H]) => `${[Y, M, D].join("-")} ${H}时`)(
          selectedValue
        ),
        "hour-minute": selectedValue.join(":"),
      };
      const str = typeMap[props.type];

      timeText.value = str;
      ctx.emit("field-change", str);
      open.value = false;
    };

    useRender(() => (
      <div>
        <div
          class="uno-flex uno-flex-items-center"
          onClick={() => {
            open.value = true;
          }}
        >
          <text class="uno-fs-30 uno-flex-1 uno-text-right">
            {timeText.value}
          </text>
          <ArrowRight />
        </div>
        {/* <nut-popup
          position="bottom"
          visible={open.value}
          onClickOverlay={onCancel}
        > */}
        <MyDatePicker
          {...(props || {})}
          {...(ctx.attrs || {})}
          open={open.value}
          onCancel={onCancel}
          onConfirm={onConfirm}
        ></MyDatePicker>
        {/* </nut-popup> */}
      </div>
    ));
    return {};
  },
};
</script>

<style lang="scss"></style>
